<template>
  <div class="vue-croppa clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://zhanziyang.github.io/vue-croppa/#/">https://zhanziyang.github.io/vue-croppa/#/</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install --save vue-croppa<br>
            <br>
            import 'vue-croppa/dist/vue-croppa.css'<br>
            import Vue from 'vue'<br>
            import Croppa from 'vue-croppa'<br>
            Vue.use(Croppa)
          </code>
        </div>
      </el-card>
      <croppa v-model="croppa"
        initial-image="https://zhanziyang.github.io/vue-croppa/static/500.jpeg">
      </croppa>
      <div class="btns">
        <button @click="dataUrl = croppa.generateDataUrl()">Output</button>
        <button @click="dataUrl = croppa.generateDataUrl('image/jpeg')">Output JPEG</button>
        <button @click="dataUrl = croppa.generateDataUrl('image/jpeg', 0.8)">Output 20% compressed JPEG</button>
      </div>
      <br>
      <div class="size">Output size: {{dataUrl.length}}</div>
      <img :src="dataUrl">
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import 'vue-croppa/dist/vue-croppa.css'

export default {
  name: 'VueCroppa',
  data () {
    return {
      croppa: {},
      dataUrl: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-croppa{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
